<template>
  <div class="mainDiv">
    <el-container class="main_container">
      <el-main v-loading="loading">
          <el-card>
           <el-descriptions :column="4" border>
             <el-descriptions-item label="档案编号">{{form.fileNo}}</el-descriptions-item>
             <el-descriptions-item label="承运商">{{form.carrierName}}</el-descriptions-item>
             <!-- <el-descriptions-item label="委托单号">{{form.entrustNo}}</el-descriptions-item> -->
             <el-descriptions-item label="姓名">{{form.personName}}</el-descriptions-item>
             <el-descriptions-item label="性别"><dict-tag :options="dict.type.sys_user_sex" :value="form.sex" /></el-descriptions-item>
              <el-descriptions-item label="驾驶证号">{{form.driverCode}}</el-descriptions-item>
              <el-descriptions-item label="准驾车型"><dict-tag :options="dict.type.tms_vehicle_class" :value="form.vehicleClass" /></el-descriptions-item>
              <el-descriptions-item label="发证机关">{{form.issuingOrganizations}}</el-descriptions-item>
              <el-descriptions-item label="初次领证日期">{{form.receiveDateFirst}}</el-descriptions-item>
              <el-descriptions-item label="驾照有效期起">{{form.validPeriodFrom}}</el-descriptions-item>
              <el-descriptions-item label="驾照有效期止">{{form.validPeriodTo}}</el-descriptions-item>
              <el-descriptions-item label="驾驶证图片"><el-image :src="form.driverImg" :preview-src-list="[form.driverImg]" style="width: 120px; height: 60px;"></el-image></el-descriptions-item>
              <el-descriptions-item label="驾驶证副页图片"><el-image :src="form.driverSecondImg" :preview-src-list="[form.driverSecondImg]" style="width: 120px; height: 60px;"></el-image></el-descriptions-item>
              <el-descriptions-item label="备注">{{form.remark}}</el-descriptions-item>
           </el-descriptions>
          </el-card>
      </el-main>
      <el-footer>
        <div class="footerDivClass">
          <!-- <el-button type="primary" @click="submitForm">确 定</el-button> -->
          <el-button @click="close()">返 回</el-button>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { listDriver, getDriver, delDriver, addDriver, updateDriver } from "@/api/tms/driver";
  export default{
  dicts: ['sys_del_flag', 'tms_vehicle_class','sys_user_sex'],
    data(){
      return{
        // 表单参数
        form: {},
        loading:false
      }
    },
    created() {
      const id = this.$router.currentRoute.params.id;
      if(id != undefined && id != ''){
        this.getInfo(id)
      }
    },
    methods:{
      getInfo(id){
        this.loading = true;
        getDriver(id).then(response => {
          this.loading = false;
          this.form = response.data;
          this.form.vehicleClass = this.form.vehicleClass.split(",");
        });
        console.info(this.form)
      },
      /** 关闭按钮 */
      close() {
        const obj = {
          path: "/tms/driver",
          query: { t: Date.now(), pageNum: this.$route.query.pageNum },
        };
        this.$tab.closeOpenPage(obj);
      },
    }
  }
</script>

<style lang="scss" scoped>
  .input-width{
    width: 214px;
  }

  .mainDiv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .main_container {
    width: 100%;
    height: 100%;
  }
  .el-card {
    margin-bottom: 5px;
  }
  .el-footer {
    background-color: #ffffff;
    color: #333;
    text-align: right;
    line-height: 60px;
    border-top: 1px solid #e6ebf5;
    box-shadow: 0px 0px 10px #cdcdcd;
    z-index: 1000;
  }
  .footer-class {
    text-align: right;
    margin-top: 15px;
  }
  //顶部距离css
  .topItem {
    margin-bottom: 0px;
  }
  .areaSelect {
    width: 100%;
    padding-right: 5px;
  }
</style>
